<template>
	<!-- <div class="common-layout"> -->
	  <el-container>
	    <el-header class="header">
			  <el-menu
			      class="el-menu-demo"
			      mode="horizontal"
			      :ellipsis="false"
			      @select="handleSelect"
				  router
				  :default-active="proxy.router.currentRoute.value.path"
			    >
			      <el-menu-item index="/home">
			  	  <template #title>
					  <span>xxx论坛系统</span>
				  </template>
			      </el-menu-item>
			      <div class="flex-grow" />
				  <el-menu-item index="/profile">个人中心</el-menu-item>
			      <el-sub-menu index="">
			        <template #title>{{userInfo.name}}</template>
					<el-menu-item index="/myForum">我的发布</el-menu-item>
					<el-menu-item index="/myCollect">我的收藏</el-menu-item>
			        <el-menu-item index="logout">退出登录</el-menu-item>
			      </el-sub-menu>
			    </el-menu>
		  </el-header>
	      <el-main style="padding: 5%;">
				<router-view></router-view>
			</el-main>
	  </el-container>
	<!-- </div> -->
</template>

<script setup>
import { getCurrentInstance, reactive, ref } from "vue";
import { useRouter } from "vue-router";

const { proxy } = getCurrentInstance();

const userInfo = {
	name: '',
	account: ''
}
const init = () => {
	let loginUser = JSON.parse(sessionStorage.getItem("bbs-web"))
	userInfo.name = loginUser.name
	userInfo.account = loginUser.account
}

init();

const handleOpen = () => {
	
}
const handleClose = () => {
	
}

const handleSelect = (key, keyPath) => {
	if (key === 'logout') {
		sessionStorage.removeItem('bbs-web')
		proxy.router.push('/login')
	}
}

</script>

<style scoped>
	.flex-grow {
	  flex-grow: 1;
	}
	.item {
	  vertical-align: text-top;
	}
	.header{
		position: fixed;
		left: 0;
		right: 0;
		z-index: 10;
	}
</style>